<template>
    <div>
        <h1>管理员添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">用户名</td>
                    <td><input type="text" v-model="info.userName" ></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td><input type="password" v-model="info.userPwd" ></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td><input type="password" v-model="pwd" ></td>
                </tr>
                <tr>
                    <td align="right">昵称</td>
                    <td><input type="text" v-model="info.nickName" ></td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td>
                        <input type="radio" v-model="info.gender" :value="1" name="sexs" >男
                        <input type="radio" v-model="info.gender" :value="2" name="sexs" >女
                    </td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" v-model="info.state" :value="1" name="states"> 解冻
                        <input type="radio" v-model="info.state" :value="2" name="states" >冻结
                    </td>
                </tr>
                <tr>
                    <td align="right">身份证图片</td>
                    <td>
                        <input type="file" @change="img" >
                        <img :src="info.cardPhoto" v-if="info.cardPhoto!=''" width="100" height="100">
                    </td>
                </tr>
                <tr>
                    <td align="right">图片</td>
                    <td>
                        <input type="file" @change="img1" >
                        <img :src="info.photo" v-if="info.photo!=''" width="100" height="100">
                    </td>
                </tr>
                <tr>
                    <td align="right">手机号</td>
                    <td><input type="text" v-model="info.tel" ></td>
                </tr>
                <tr>
                    <td align="right">生日</td>
                    <td><input type="date" v-model="info.birthDay" ></td>
                </tr>
                <tr>
                    <td align="right">简介</td>
                    <td>
                        <textarea v-model="info.desc" rows="50px" cols="100px" ></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">角色</td>
                    <td>
                        <select v-model="info.roleId">
                            <option value="">请选择</option>
                            <option v-for="item in bindrole" :value="item.roleId">{{ item. roleName}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="提交" @click="add"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import moment from "moment";
import { useStore } from "@/stores/user";
import {useRouter,useRoute} from "vue-router";
const router=useRouter();
const route=useRoute();
const uStore=useStore();
onMounted(()=>
{
    if(uStore.userInfo.id)
    {
        bindselect();
    }
    else
    {
        router.push("/login");
    }
})
let info:any=reactive({
  "userName": "",
  "userPwd": "",
  "nickName": "",
  "gender": "",
  "state": "",
  "cardPhoto": "",
  "photo": "",
  "tel": "",
  "birthDay": "",
  "desc": "",
  "roleId": "",
})
let pwd:any='';
const add=()=>
{
    if(info.userName=="")
    {
        alert("用户名不能为空");
        return;
    }
    if(info.userPwd=="")
    {
        alert("密码不能为空");
        return;
    }
    if(info.userPwd!=pwd)
    {
        alert("密码不一致");
        return;
    }
    if(info.nickName=="")
    {
        alert("昵称不能为空");
        return;
    }
    let zztel=/^[\u4e00-\u9fa5]{1,20}$/;
    if(zztel.test(info.nickName)==false)
    {
        alert("昵称为1到20个汉字");
        return;
    }
    if(info.gender=="")
    {
        alert("性别不能为空");
        return;
    }
    if(info.state=="")
    {
        alert("状态不能为空");
        return;
    }
    if(info.cardPhoto=="")
    {
        alert("身份证不能为空");
        return;
    }
    if(info.photo=="")
    {
        alert("图片不能为空");
        return;
    }
    if(info.tel=="")
    {
        alert("手机号不能为空");
        return;
    }
    let zzph=/^1[3-9]\d{9}$/;
    if(zzph.test(info.tel)==false)
    {
        alert("手机号格式不正确");
        return;
    }
    if(info.birthDay=="")
    {
        alert("生日不能为空");
        return;
    }
    if(info.desc=="")
    {
        alert("简介不能为空");
        return;
    }
    if(info.roleId=="")
    {
        alert("角色不能为空");
        return;
    }
    axios({
        url:'/api/Month/AddAdmin',
        method:'post',
        data:info
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data==-1)
        {
            alert("手机号不唯一");
            return;
        }
        if(res.data>0)
        {
            alert("添加管理员成功");
            return;
        }
        else
        {
            alert("添加管理员失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const img=(e:any)=>
{
    var obj=e.target.files[0];
    let f=new FormData();
    f.append("file",obj);
    axios({
        url:'/api/Month/Upload',
        method:'post',
        data:f
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data=="不是图片")
        {
            alert("您选择的不是图片");
            return;
        }
        if(res.data=="大于2M")
        {
            alert("您选择的图片大于2M");
            return;
        }
        info.cardPhoto=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
    
}
const img1=(e:any)=>
{
    var obj=e.target.files[0];
    let f=new FormData();
    f.append("file",obj);
    axios({
        url:'/api/Month/Upload',
        method:'post',
        data:f
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data=="不是图片")
        {
            alert("您选择的不是图片");
            return;
        }
        if(res.data=="大于2M")
        {
            alert("您选择的图片大于2M");
            return;
        }
        info.photo=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
    
}
let bindrole:any=ref([]);
const bindselect=()=>
{
    axios({
        url:'/api/Month/BindRole',
        method:'get'
    })
    .then((res)=>
    {
        console.log(res);
        bindrole.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
</script>

<style scoped>

</style>